<template>
  <div ref='homePage'>
    <el-container>
      <el-header>
        <aheader>
        </aheader>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <amenu></amenu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>

        </el-container>
      </el-container>
    </el-container>

  </div>
</template>
<script>
  import aheader from '@/components/header/header';
  import afooter from '@/components/footer/footer';
  import amenu from '@/components/header/menu';
  let self;
  export default {

    data() {
      return {
        clientHeight: '',
      }
    },
    components: {
      aheader,
      afooter,
      amenu
    },
    mounted() {
      self = this;
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      console.log(self.clientHeight);
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    methods: {
      changeFixed(clientHeight) { //动态修改样式
        console.log(clientHeight);
        this.$refs.homePage.style.height = clientHeight + 'px';

      },
    },

  };

</script>
<style>
  .el-container.is-vertical {
    height: 100%;
  }

</style>
